<template>
	<view class="content">
		<view class="_flex _border avarar">
			<text>头像</text>
			<view>
				<u-upload :fileList="fileList1" multiple :maxCount="1" name="1" :action="action" :form-data="formData"
					@on-success="handleSuccess" @on-error="handleError" @afterRead="afterRead" @delete="deletePic">
					<!-- <u-avatar :src="userInfo.avatar" :size="50"></u-avatar> -->
				</u-upload>
				<u-icon name="arrow-right" color="#888" size="16"></u-icon>
			</view>
		</view>
		<view class="_flex _border">
			<text>昵称</text>
			<view>
				<input type="text" placeholder="请输入您的昵称" placeholder-style="color:rgb(192, 196, 204);"
					v-model="userInfo.username" />
				<!-- <u-icon name="arrow-right" color="#888" size="16"></u-icon> -->
			</view>
		</view>
		<view class="_flex _border">
			<text>性别</text>
			<view class="_position" @click="showSex = true"></view>
			<view>
				<input type="text" placeholder="请选择您的性别"
					placeholder-style="color:rgb(192, 196, 204);pointer-events:none;" v-model="userInfo.gender"
					disabled />
				<u-icon name="arrow-right" color="#888" size="16"></u-icon>
			</view>
		</view>
		<view class="_flex _border">
			<text>年龄</text>
			<view>
				<input type="number" placeholder="请输入您的年龄" placeholder-style="color:rgb(192, 196, 204);"
					v-model="userInfo.age" />
				<!-- <u-icon name="arrow-right" color="#888" size="16"></u-icon> -->
			</view>
		</view>
		<view class="_flex _border">
			<text>常住地</text>
			<view class="_position" @click="visible = true"></view>
			<view>
				<input type="text" placeholder="请选择您的常住地"
					placeholder-style="color:rgb(192, 196, 204);pointer-events:none;" v-model="userInfo.address"
					disabled />
				<u-icon name="arrow-right" color="#888" size="16"></u-icon>
			</view>
		</view>
		<view class="_flex_ _border">
			<text>个人照片(最多只可上传6张)</text>
			<u-upload :fileList="fileList2" multiple :maxCount="6" name="2" :action="action" :form-data="formData"
				@on-success="handleSuccess" @on-error="handleError" @afterRead="afterRead" @delete="deletePic">
			</u-upload>
		</view>
		<view class="_flex _border">
			<text>个人介绍</text>
			<view>
				<u--textarea v-model="userInfo.personalIntro" placeholder="请输入您的个人介绍" autoHeight></u--textarea>
				<!-- <u-icon name="arrow-right" color="#888" size="16"></u-icon> -->
			</view>
		</view>
		<view class="button" @click="editUserInfo">
			<text>保存</text>
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
			@confirm="PickerConfirm" @cancel="visible = false" :visible="visible" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getUserinfo,
		editUserInfo
	} from '../../../api/user.js';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				column: 3,
				defaultValue: '',
				maskCloseAble: true,
				showSex: false,
				visible: false,
				userInfo: {},
				action: 'https://upload-z2.qiniup.com', //七牛云上传api
				formData: {},
				fileList1: [],
				fileList2: [], //个人照片
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
			}
		},
		onLoad() {
			this.getUserinfo();
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 成功处理
			handleSuccess(file, response) {
				uni.showToast({
					title: `${file.name} 上传成功`
				});
			},
			// 失败处理
			handleError(file, error) {
				uni.showToast({
					title: `${file.name} 上传失败: ${error.message}`,
					icon: 'none'
				});
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://120.79.170.227:5000/api/public/upload", //七牛云上传接口
						filePath: url,
						name: "file",
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.url);
							}, 1000);
						},
					});
				});
			},
			sexSelect(e) {
				this.userInfo.gender = e.name
				this.showSex = false;
			},
			//选择的省市区
			PickerConfirm(e) {
				this.userInfo = {
					...this.userInfo,
					...{
						address: e.name || ''
					}
				};
				this.visible = false;
			},
			//图片解析
			getImageUrl(imgs) {
				var urls = new Array();
				for (var i = 0, len = imgs.length; i < len; i++) {
					urls.push(imgs[i].url);
				}
				return urls || [];
			},
			/**
			@method 编辑用户信息
			**/
			async editUserInfo() {
				try {
					this.userInfo = {
						...this.userInfo,
						...{
							avatar: this.fileList1.length > 0 ? this.getImageUrl(this.fileList1)[0] : '',
							lifePhotos: this.fileList2.length > 0 ? this.getImageUrl(this.fileList2) : '',
						}
					};

					const res = await editUserInfo(this.userInfo);
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: "default",
							title: "默认主题",
							message: "编辑成功",
							iconUrl: "https://uviewui.com/demo/toast/default.png"
						});
						this.getUserinfo();
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 获取用户信息
			**/
			async getUserinfo() {
				try {
					this.fileList2 = [];
					this.fileList1 = [];
					const res = await getUserinfo();
					if (res.code == 200) {
						this.userInfo = {
							...res.data
						};

						for (var i = 0; i < res.data.lifePhotos.length; i++) {
							this.fileList2.push({
								url: res.data.lifePhotos[i]
							});
						}

						this.fileList1.push({
							url: res.data.avatar
						});
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f9fa;
	}
</style>
<style scoped lang="scss">
	.content {
		width: auto;
		padding: 0rpx;

		.avarar /deep/ .u-upload {
			// width: 100rpx;
			// height: 100rpx;
			// border-radius: 50rpx;
		}

		.avarar /deep/ .u-upload__wrap__preview {
			// width: 100rpx;
			// height: 100rpx;
			// border-radius: 50rpx;
		}

		._border {
			width: auto;
			border-bottom: 2rpx solid #f3f3f4;
		}

		.button {
			width: 90%;
			display: flex;
			padding: 0rpx 0rpx 0rpx 0rpx;
			margin: 0rpx auto;
			margin-top: 50rpx;

			>text {
				width: 100%;
				height: 84rpx;
				background: #ffaf32;
				border-radius: 43rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
			}
		}

		._flex_ {
			width: auto;
			background-color: #fff;
			padding: 25rpx 20rpx 25rpx 20rpx;

			text {
				font-weight: 500;
				font-size: 30rpx;
				letter-spacing: 2rpx;
				display: block;
				margin-bottom: 25rpx;
			}
		}

		._flex {
			width: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 25rpx 20rpx 25rpx 20rpx;
			position: relative;

			._position {
				width: 90%;
				height: 80rpx;
				position: absolute;
				background-color: transparent;
				bottom: 0rpx;
				z-index: 9999;
			}

			text {
				font-weight: 500;
				font-size: 30rpx;
				letter-spacing: 2rpx;
			}

			view {
				width: auto;
				display: flex;
				align-items: center;

				input {
					font-size: 30rpx;
					text-align: right;
					letter-spacing: 2rpx;
					padding-right: 10rpx;
				}

				/deep/ .u-textarea {
					width: 400rpx;
					border: none;
					text-align: right;
				}

				/deep/ .uni-textarea-textarea {}
			}
		}
	}
</style>